<template>
  <div class="bg-white p-6 rounded-xl shadow-sm hover:shadow-md transition-all duration-300 card-hover">
    <div class="text-primary text-3xl mb-4">
      <i class="fa fa-quote-left"></i>
    </div>
    <blockquote class="text-lg italic mb-4 text-balance leading-relaxed">
      {{ quote.text }}
    </blockquote>
    <div class="flex items-center justify-between text-sm text-neutral-500">
      <cite class="not-italic">— {{ quote.author || quote.source }}</cite>
      <span v-if="quote.theme" class="px-2 py-1 bg-neutral-100 rounded-full text-xs">
        {{ getThemeLabel(quote.theme) }}
      </span>
    </div>
  </div>
</template>

<script setup>
defineProps({
  quote: {
    type: Object,
    required: true
  }
})

// 主题标签映射
const themes = {
  'inspiration': '励志',
  'healing': '治愈', 
  'philosophy': '哲理',
  'life': '生活',
  'love': '爱情'
}

const getThemeLabel = (themeValue) => {
  return themes[themeValue] || themeValue
}
</script>